<template>   
    <Form ref="formItem" :model="formItem" :label-width="80" :rules="ruleValidate">
        <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
        <FormItem label="选择班级" prop="eclass_id">
            <CheckboxGroup v-model="formItem.eclass_id" @on-change="checkAllGroupChange">
                <Checkbox v-for="item in EclassList" :label="item.eclass_id" :key="item.eclass_id">
                {{item.eclass_name.zh?item.eclass_name.zh:item.eclass_name.mn}}
                </Checkbox>
            </CheckboxGroup>
        </FormItem>
        <Spin size="large" fix v-if="spinShow"></Spin>
        <FormItem>
            <Button type="primary" @click="submit('formItem')">下载</Button>
        </FormItem>
    </Form>

</template>

<script>
export default {
    data () {
        return {
            saveUrl:'api/student/v1/export',//保存接口

            EclassListUrl:'api/eclass/v1/eclass/info',//班级路劲
            EclassList:[],//班级数据
            EclassId:[],
            indeterminate: true,
            checkAll: false,
            spinShow:true,
            formItem: {      
                eclass_id:[],//班级
            },
            ruleValidate: {
                eclass_id: [
                    { required: true, type: 'array', min: 1, message: '至少选择一个班级', trigger: 'change' },
                ],
            }
        }
    },
    methods: {
        /************************************************************
         * 
         * 提交时
         * 
         ************************************************************/
        submit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.spinShow=true//输入框禁用
                    this.$http.post(this.saveUrl,this.formItem).then(val=>{
                        window.open(val.data)
                        this.$emit('on-save',false)
                        this.$Message.success(val.message);
                        this.spinShow=false
                    }).catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShow=false
                    }) 
                    
                } else {
                    this.$Message.error("表单验证失败!");
                }
            })
        },
        
        /************************************************************
         * 
         * 获取年级信息
         * 
         ************************************************************/
        eclass(){
            this.spinShow=true 
            this.$http.get(this.EclassListUrl).then(val=>{  
                this.EclassList=val.data 
                this.EclassId=val.data.map((item)=>{
                    return item.eclass_id
                })
                this.spinShow=false                 
            }).catch(err=>{
                console.log(err);
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
                this.spinShow=false 
            })

        },

        /************************************************************
         * 
         * 点击全选按钮
         * 
         ************************************************************/
        handleCheckAll() {
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;
            if (this.checkAll) {
                this.formItem.eclass_id = this.EclassId;
            } else {
                this.formItem.eclass_id = [];
            }
        },
        /************************************************************
         * 
         * 点击某个选择框，全选框的状态
         * 
         ************************************************************/
        checkAllGroupChange (data) {
            if (data.length === this.EclassList.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = true;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        }

    },
    mounted(){
        this.eclass();
    },

}
</script>
